<template>
        <div class="tree-block" :draggable="isDraggableCol" @dragstart="dragstart($event)"
            @dragend="dragend($event)">
            <div class="tree-row"
                @click="toggle"
                :data-level="depth"
                :tree-id="model[custom_field.id]"
                :tree-p-id="model[custom_field.parent_id]"
                :class="{'highlight-row': model.highlight == true}"
                v-bind:style="{backgroundColor: model.backgroundColor}">
                <column
                    v-for="(subItem, subIndex) in columns"
                    v-bind:class="['align-' + subItem.align, 'colIndex' + subIndex]"
                    :field="subItem.field"
                    :width="subItem.width"
                    :flex="subItem.flex"
                    :border="border"
                    :isdraggable="subItem.isdraggable"
                    @mouseover="subItem.isdraggable?setColDraggable(subItem.isdraggable):setColDraggable(false)"
                    @mouseout="setColDraggable(false)"
                    :key="subIndex">

                    <div v-if="subItem.type === 'selection'" style="width: 100%; height: 100%;">
                        <div :style="'box-sizing:border-box;height: 100%;width: 100%;padding-left: '+ 10*depth + 'px'">
                            <span v-if = "model[custom_field.lists] && model[custom_field.lists].length" class="zip-icon" v-bind:class="[model[custom_field.open] ? 'arrow-bottom' : 'arrow-right']"></span>
                            <span v-else class="zip-icon arrow-transparent"></span>

                            <span v-if="subItem.formatter" v-html="subItem.formatter(model)"></span>
                            <template v-else-if="subItem.editable">
                                <el-select v-if="subItem.input && subItem.input.type === 'select'" v-model="model[subItem.field]" style="width:100%" :filterable="true">
                                    <el-option
                                            v-for="item in subItem.input.selectData.list"
                                            :key="item[subItem.input.selectData.value?subItem.input.selectData.value: 'value']"
                                            :label="item[subItem.input.selectData.label?subItem.input.selectData.label: 'label']"
                                            :value="item[subItem.input.selectData.value?subItem.input.selectData.value: 'value']">
                                    </el-option>
                                </el-select>

                                <el-checkbox v-else-if="subItem.input && subItem.input.type === 'checkbox'" v-model="model[subItem.field]" :false-label="'0'" :true-label="'1'"></el-checkbox>

                                <el-input v-else v-model="model[subItem.field]" style="width: calc(100% - 12px)"></el-input>
                            </template>
                            <span v-else>{{model[subItem.field]}}</span>
                        </div>
                    </div>
                    <!--<span v-if="subItem.type === 'selection'" style="">

                        <space :depth="depth"/>
                        <span v-if = "model[custom_field.lists] && model[custom_field.lists].length" class="zip-icon" v-bind:class="[model[custom_field.open] ? 'arrow-bottom' : 'arrow-right']">
                        </span>
                        <span v-else class="zip-icon arrow-transparent">
                        </span>

                        <el-input v-model="model[subItem.field]" style="display:inline;margin-left: 8px; flex: 1;"></el-input>
                        &lt;!&ndash;<span v-if="subItem.formatter" v-html="subItem.formatter(model)"></span>
                        <span v-else v-html="model[subItem.field]"></span>&ndash;&gt;
                    </span>-->
                    <span v-else-if="subItem.type === 'action'">
                        <a class="action-item"
                            v-for="(acItem, acIndex) in subItem.actions"
                            :key="acIndex"
                            type="text" size="small"
                            @click.stop.prevent="acItem.onclick(model, parentmodel)">
                            <i :class="acItem.icon" v-html="acItem.formatter(model)"></i>
                        </a>
                    </span>
                    <span v-else-if="subItem.type === 'checkbox'">
                      <input type="checkbox"
                        v-if="model.isShowCheckbox !== false"
                        :name="model[custom_field.id]"
                        v-model="model[custom_field.checked]"
                        class="checkbox action-item"
                        @click.stop="onCheckboxClick($event, model)"/>
                    </span>
                    <span v-else>
                        <span v-if="subItem.formatter" v-html="subItem.formatter(model)"></span>
                        <template v-else-if="subItem.editable">
                                <el-select v-if="subItem.input && subItem.input.type === 'select'" v-model="model[subItem.field]" style="width:100%" :filterable="true">
                                    <el-option
                                            v-for="item in subItem.input.selectData.list"
                                            :key="item[subItem.input.selectData.value?subItem.input.selectData.value: 'value']"
                                            :label="item[subItem.input.selectData.label?subItem.input.selectData.label: 'label']"
                                            :value="item[subItem.input.selectData.value?subItem.input.selectData.value: 'value']">
                                    </el-option>
                                </el-select>

                                <el-checkbox v-else-if="subItem.input && subItem.input.type === 'checkbox'" v-model="model[subItem.field]" :false-label="'0'" :true-label="'1'"></el-checkbox>

                                <el-input v-else v-model="model[subItem.field]" style="width: calc(100% - 12px)"></el-input>
                            </template>
                        <span v-else>{{model[subItem.field]}}</span>
                    </span>
                </column>
                <div class="hover-model" style="display: none">
                    <div class="hover-block prev-block">
                        <i class="el-icon-caret-top"></i>
                    </div>
                    <div class="hover-block center-block">
                        <i class="el-icon-caret-right"></i>
                    </div>
                    <div class="hover-block next-block">
                        <i class="el-icon-caret-bottom"></i>
                    </div>
                </div>
            </div>
            <row
                v-show="model[custom_field.open]"
                v-for="(item, index) in model[custom_field.lists]"
                :model="item"
                :parentmodel="model"
                :columns="columns"
                :key="index"
                :isdraggable="isdraggable"
                :border="border"
                :depth="depth * 1 + 1"
                :custom_field="custom_field"
                :onCheck="onCheck"
                :isContainChildren="isContainChildren"
                v-if="isFolder">
            </row>
        </div>

    </template>
    <script>
    import column from './column.vue'
    import space from './space.vue'
    export default {
      name: 'row',
        props: ['model','depth','columns','isdraggable','border', 'custom_field','onCheck','isContainChildren','parentmodel'],
        data() {
            return {
                open: false,
                visibility: 'visible',
                isDraggableCol: false,
            }
        },
        components: {
          column,
          space
        },
        computed: {
            isFolder() {
                return this.model[this.custom_field.lists] && this.model[this.custom_field.lists].length
            }
        },
        methods: {
            toggle() {
                if(this.isFolder) {
                    this.model[this.custom_field.open] = !this.model[this.custom_field.open];
                    this.$forceUpdate()
                }
            },
            dragstart(e) {



                if (navigator.userAgent.indexOf('Firefox') >= 0) {
                    // Firefox drag have a bug
                    e.dataTransfer.setData('Text', this.id);
                }
                window.dragId = e.target.children[0].getAttribute('tree-id');
                window.dragPId = e.target.children[0].getAttribute('tree-p-id');
                window.dragParentNode = e.target;
                e.target.style.opacity = 0.2
            },
            dragend(e) {
              e.target.style.opacity = 1;
            },
            setAllCheckData (curList, flag) {
              const listKey = this.custom_field.lists
              for( let i = 0; i < curList.length; i++) {
                var item = curList[i]
                this.$set(item, 'checked', flag)
                if (item[listKey] && item[listKey].length) {
                  this.setAllCheckData(item[listKey], flag)
                }
              }
            },
            onCheckboxClick(evt, model) {
              const list = model[this.custom_field.lists];
              // 判断是否有子节点，如有需递归处理
              if (list && this.isContainChildren) {
                this.setAllCheckData([model] || [], !!evt.target.checked)
              } else {
                this.$set(model, 'checked', !!evt.target.checked)
              }
              this.onCheck && this.onCheck()
            },
            setColDraggable(draggable){
                this.isDraggableCol = draggable
            },
        }
    }
    </script>
  <style lang="scss">
    .tree-block{
      width: 100%;
      background: rgba(255,255,255,0.8)
    }
    .tree-row{
      position: relative;
      display: flex;
    //   padding: 10px 10px;
      border-bottom: 1px solid #eee;
      line-height: 32px;
      &:hover{
          background: #ecf5ff
      }
      &.highlight-row{
          background: #ffe88c;
      }
      .align-left{
          text-align: left;
      }
      .align-right{
          text-align: right;
      }
      .align-center{
          text-align: center;
      }
    }
    .hover-model{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.6);
    }
    .hover-block{
        display: flex;
        opacity: 0.1;
        transition: opacity 0.5s;
        justify-content: center;
        align-items: center;
        i{
            color: #FFF;
        }
    }
    .prev-block{
        height: 25%;
        background: #a0c8f7;
    }
    .center-block{
        height: 50%;
        background: #a0c8f7;
    }
    .next-block{
        height: 25%;
        background: #a0c8f7;
    }
    .action-item{
        color: #409eff;
        cursor: pointer;
        i{
            font-style: normal;
        }
    }
    .zip-icon{
        display: inline-block;
        width: 8px;
        height: 8px;
        vertical-align: middle;
        background: url('') no-repeat center;
        background-size: cover;
    }
    .arrow-transparent{
        visibility: hidden;
    }
    .arrow-right{

    }
    .arrow-bottom{
        transform: rotate(90deg)
    }
    [draggable=true] {
      -khtml-user-drag: element;
    }
    </style>
